<html>
<meta charset="utf-8">
<title>接口数据测试</title>
<style>
body {
	background-color: #e2e2e2;
}

.container {
	background-color: #fff;
	width: 1200px;
	margin: 20px auto;
	padding: 20px;
	overflow: auto;
}

.btn {
	display: inline-block;
	padding: 10px 20px;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
	background-color: #ff9999;
	margin-right: 15px;
}

.group-item {
	padding: 0 15px;
	margin-bottom: 15px;
}

.input-group {
	display: inline-block;
}

.input-text {
	padding: 5px 10px;
	line-height: 28px;
	min-width: 360px;
}

.input-mini {
	padding: 5px 10px;
	line-height: 28px;
	min-width: 80px;
}

table, thead, tbody, tfoot, tr, th, td {
	overflow: auto;
}

tr {
	margin: 5px 0;
}

td {
	text-align: center;
}

.textarea textarea {
	display: block;
	width: 100%;
	height: 200px;
}
</style>
<script type="text/javascript" src="Public/static/jquery-2.0.3.min.js"></script>
<body>
	<div class="container">
		<form action="" method="post" autocomplete="off"
			enctype="multipart/form-data">
			<div class="group-item">
				<label>URL：</label>
				<div class="input-group">
					<input type="text" name="action" class="input-text"
						value="<?php echo $_SERVER['HTTP_HOST'] == 'localhost' ? 'http://'.$_SERVER['HTTP_HOST'].'/jzbgb/index.php?s=/Api/' : 'http://'.$_SERVER['HTTP_HOST'].'/index.php?s=/Api/'; ?>">
				</div>
			</div>
			<table style="width: 100%;">
				<thead>
					<tr>
						<th>参数</th>
						<th>值</th>
						<th><a href="javascript:;" onclick="addItem()" class="btn">+ 文本</a><a
							href="javascript:;" onclick="addFile()" class="btn">+ 文件</a></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><input type="text" class="input-mini txt-name" value="format"></td>
						<td><input type="text" class="input-text txt-value" value="json"></td>
						<td></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3"><a href="javascript:;" class="btn ajax-post">提交</a></td>
					</tr>
				</tfoot>
			</table>
		</form>
	</div>
	<div class="container">
		<div class="group-item">
			<label class="textarea"> <textarea rows="5" cols="80" id="result"></textarea>
			</label>
		</div>
	</div>
	<script type="text/javascript">
function addItem() {
	htmlstring = '<tr>';
	htmlstring += '<td><input type="text" class="input-mini txt-name"></td>';
	htmlstring += '<td><input type="text" class="input-text txt-value"></td>';
	htmlstring += '<td><a href="javascript:;" onclick="$(this).closest(\'tr\').remove();" class="btn">删除</a></td>'; 
	htmlstring += '</tr>';
	
	$('tbody').append(htmlstring);
}

function addFile() {
	htmlstring = '<tr>';
	htmlstring += '<td><input type="text" class="input-mini txt-name"></td>';
	htmlstring += '<td><input type="file" class="input-text txt-value"></td>';
	htmlstring += '<td><a href="javascript:;" onclick="$(this).closest(\'tr\').remove();" class="btn">删除</a></td>'; 
	htmlstring += '</tr>';
	
	$('tbody').append(htmlstring);
}

$(function(){
	$('.ajax-post').on('click', function(e){
		self = $(this);
		form = self.closest('form');
		url = form.find('input[name="action"]').val();
		
		$.each($('.ajax-post').closest('form').find('tbody tr'), function(i, item){
			name = $(item).find('.txt-name').val();
			val = $(item).find('.txt-value').val();
			$(item).find('.txt-value').attr('name', name);
		});

		if (form.find('input[type="file"]').html() == undefined) {
			$.post(url, form.serialize(), function(data){
				$('#result').val(data);
			}, 'html');
		} else {
			form.attr('action', url);
			form.submit();
		}
	});
});
</script>
</body>
</html>